鐵人賽的最後一天
以三個前端比較常見的情境練習需求來總結第五部分

今天的內容

一、註冊表單
二、產品清單
三、登入頁面
四、總結

一、註冊表單

按下上方的註冊後，會彈出註冊表單的視窗

1. 包含「帳號」、「密碼」、「密碼確認」、「縣市」、「同意服務條款」
2. 每個欄位皆為必填，如果其中有個欄位沒填寫，或者沒有勾選「同意服務條款」，送出後，會跳出錯誤訊息「有欄位尚未正確填寫」
3. 確認密碼必須和密碼相同，格式為「至少八個字元，包含一個英文字母和數字」
4. 縣市的資料包含所有的台灣縣市，可以做文字篩選
5. 點選文字terms & conditions，會跳出服務條款的內容

二、產品清單

建立一個產品清單的頁面
可以透過上方的篩選欄位，篩選下方的資料

(一)欄位篩選

1. 商品名稱：包含輸入的文字，沒填寫代表不限
2. 價錢、日期：介於頭尾區間，沒填寫代表無限小或無限大
3. 商品分類：有勾選的分類
4. 按下篩選後，依照上方的欄位篩選條件進行篩選
5. 按下清除篩選後，清除所有的篩選條件

(二)編輯功能

將第二十八天的編輯功能，加上「變更產品預覽圖的功能」

按下「修改」後，才會將變更套用到對應的資料上

三、登入頁面

將第十六天的登入表單改良
登入的過程中，顯示載入中畫面

四、總結

雖然鐵人賽結束了
不過還有部分的內容未寫完
明天補完比賽的心得後，接著往下談到全域資料和SSR模式